<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>搜索框</title>
    <script th:src="@{https://cdn.jsdelivr.net/npm/vue/dist/vue.js}"></script>
    <script th:src="@{https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/search.css}">
</head>
<body>
<div id="app">
    <div class="search-wrapper" style="border-radius:4px">
        <div class="mb-3">
            <span class="search-title">本地搜索</span>
            <span class="float-right" @click="searchFlag = false">
            <i class="material-icons">close</i>
          </span>
        </div>
        <div class="search-input-wrapper">
            <i class="material-icons">search</i>
            <input v-model="keywords" placeholder="输入文章标题或内容..." />
        </div>
        <div class="search-result-wrapper">
            <hr class="divider" />
            <ul>
                <li class="search-reslut" v-for="item of articleList" :key="item.id">
                    <a @click="goTo(item.id)" v-html="item.articleTitle"></a>
                    <p class="search-reslut-content text-justify" v-html="item.articleContent"></p>
                </li>
            </ul>
            <div v-show="flag && articleList.length == 0" style="font-size:0.875rem">
                找不到您查询的内容：{{ keywords }}
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: function() {
            return {
                keywords: "",
                articleList: [],
                flag: false,
                searchFlag: false
            };
        },
        methods: {
            goTo(articleId) {
                this.searchFlag = false;
                window.location.href = "/blogs/" + articleId;
            }
        },
        watch: {
            keywords(value) {
                this.flag = value.trim() != "" ? true : false;
                axios
                    .get("/articles/search", {
                        params: { current: 1, keywords: value }
                    })
                    .then(({ data }) => {
                        this.articleList = data.data;
                    });
            }
        }
    });
</script>
</body>
</html>
